import { lazy } from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import { NavigateRoute, PrivateRoute } from './privateRoute';

const RouteLayout = lazy(() => import('@/layouts/RouteLayout'));
const MyResearch = lazy(() => import('@/views/MyResearch'));
const NotFound = lazy(() => import('@/views/NotFound'));
const ResearchMaterial = lazy(() => import('@/views/ResearchMaterial'));
const TopicDetail = lazy(() => import('@/views/TopicDetail'));
const Login = lazy(() => import('@/views/User/Login'));
const Register = lazy(() => import('@/views/User/Register'));

const renderRoutes = () => {
	return (
		<>
			<Route path="/" element={<Navigate to="/my-research" replace />}></Route>
			<Route element={<NavigateRoute />}>
				<Route path="/login" element={<Login />}></Route>
				<Route path="/register" element={<Register />}></Route>
			</Route>
			<Route element={<PrivateRoute />}>
				<Route element={<RouteLayout />}>
					<Route path="/my-research" element={<MyResearch />}></Route>
					<Route path="/my-research/detail" element={<TopicDetail />}></Route>
					<Route path="/research-material" element={<ResearchMaterial />}></Route>
					<Route path="/sub-app/*" element={null}></Route>
				</Route>
			</Route>
			<Route path="*" element={<NotFound />}></Route>
		</>
	);
};

const AppRoutes: React.FC = () => {
	return <Routes>{renderRoutes()}</Routes>;
};

export default AppRoutes;
